//促销添加
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { PlusOutlined } from '@ant-design/icons';
import { getRoute, addPromotional } from '../../../api/promotion';
import {
  Button,
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  message,
  Radio,
  Select,
  Switch,
  TreeSelect,
  Space,
} from 'antd';
import '../../css/twoRouter.css'
import './css/Promotion.css'
import getSelectTime from '../../../utils/date'
export default function AddPromotion() {
  const { RangePicker } = DatePicker;
  const [route, setRoute] = useState<{ sportId: number, sportName: string }[]>([])
  //路由跳转
  const navigate = useNavigate()

  useEffect(() => {
    getroute()
  }, [])

  const getroute = () => {
    getRoute(null).then(res => {
      console.log('查询行程成功', res.data);
      setRoute(res.data)
    }).catch(err => {
      console.log('查询行程失败', err);
    })
  }

  const onFinish = (values: any) => {
    console.log('values', values)
    const start = values.times[0] ? getSelectTime(values.times[0]) : values.times[0]
    const end = values.times[1] ? getSelectTime(values.times[1]) : values.times[1]
    const Date = values.timez ? getSelectTime(values.timez) : values.timez
    console.log('date=====',start,end);
    addPromotional({
      title: values.title,
      state: values.status? 1 : 0,
      sport: values.type,
      start:start,
      price: values.money,
      end:end,
      advance:Date,
    }).then(res => {
      console.log('添加成功', res);
      message.success('添加成功！')
    }).catch(err => {
      console.log('失败', err);
      message.success('添加失败！')
    })
    navigate('/home/promotion/promotionma')
  }

  const newList = route.map(item => {
    return { value: item.sportId, label: item.sportName }
  })


  //返回上一页
  const goBackPage = () => {
    window.history.back()
  }

  //获取上下架状态
  const onChange = (record: any) => {
    console.log(`switch`, record);
  };
  
  //获取行程状态
  const sernuma = (v: any) => {
    console.log('v', v);
  }
  return (
    <div>
      <Space>
        <Button className='return' onClick={goBackPage}>返回</Button>
      </Space>
      {/* 标题 */}
      <p className="head">添加促销</p>
      {/* 添加内容 */}
      <div className='addprom'>
        <div className='box'>
          <p>添加促销</p>
        </div>
        {/* from表单 */}
        <div className='fromtext'>
          <Form
            labelCol={{ span: 10 }}
            wrapperCol={{ span: 14 }}
            layout="horizontal"
            style={{ maxWidth: 600 }}
            onFinish={onFinish}
          >
            <Form.Item label="促销标题" name='title'>
              <Input placeholder="请输入促销标题" />
            </Form.Item>
            <Form.Item label="抵扣金额" name='money'>
              <InputNumber />
            </Form.Item>
            <Form.Item label="适用行程类型" name='type'>
              {/* options={[{ value: '0', label: '未上架' }, { value: '1', label: '已上架' }]} */}
              <Select
                options={newList}
                onChange={sernuma}
              ></Select>
            </Form.Item>
            <Form.Item label="上架时间段" name='times'>
              <RangePicker showTime />
            </Form.Item>
            <Form.Item label="预计上架时间" name='timez'>
              <DatePicker placeholder="请选择时间" showTime />
            </Form.Item>
            <Form.Item label="上架" valuePropName="checked" name='status '>
              <Switch
                onChange={onChange} />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}